import React, { useState } from 'react';
import { Modal, Tree, Card } from 'antd';
import CityJson from '@/common/city';
import { template } from 'lodash';
export default (props) => {
  const { show, onClose, onChange, data } = props;
  const [treeData, setTreeData] = useState([]);
  const filterList = (list, count) => {
    list.forEach((element) => {
      const { children, level } = element;
      if (level >= count) {
        element.children = null;
      } else {
        filterList(children, count);
      }
    });
    return list;
  };
  let list = filterList(JSON.parse(JSON.stringify(CityJson)), 2);
  const modelProps = {
    width: 650,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    title: '选择城市',
    open: show,
    onCancel: onClose,
    onOk: () => {
      onChange(treeData);
    },
  };

  return (
    <Modal {...modelProps}>
      <div style={{ height: 580, overflowY: 'auto' }}>
        <Tree
          checkable
          autoExpandParent
          fieldNames={{
            title: 'label',
            key: 'value',
            children: 'children',
          }}
          defaultCheckedKeys={data.reduce((item, val) => {
            return [...item, ...val.cityCode];
          }, [])}
          // defaultExpandAll={}
          treeData={list}
          onCheck={(e, i) => {
            const { checkedNodes } = i;
            setTreeData(checkedNodes);
          }}
          // onCheck={onCheck}
          // treeData={treeData}
        />
      </div>
    </Modal>
  );
};
